<template>
  <div class="app-container flex flex-col">
    <GroupsHeader v-model="activeName" :groups="groupMap[groupsKey]" />
    <div class="flex-1 relative">
      <template v-if="activeName === 'group'">
        <RangeLine
          :key="key_01"
          :groups="groupMap[groupsKey]"
          :colors="[
            ...fifthAddechart.toReversed(),
            ...fifthAddechart.toReversed(),
          ]"
          :y-axis-split-line="yAxisSplitLine"
          :y-value-increment="0"
          :y-min="-0.1"
          :y-max="yMax"
        ></RangeLine>
      </template>
      <template v-else-if="activeName === 'kill prev group accuracy'">
        <RangeLine
          :key="key_02"
          :show-line-type="2"
          :groups="groupMap[groupsKey]"
          :colors="[
            ...fifthAddechart.toReversed(),
            ...fifthAddechart.toReversed(),
          ]"
          :y-axis-split-line="yAxisSplitLine"
          :y-value-increment="0"
          :y-min="-0.1"
          :y-max="yMax"
        ></RangeLine>
      </template>
      <template v-else-if="activeName === 'group bar line'">
        <GroupBarLine :key="key_03" :groups="groupMap[groupsKey]"></GroupBarLine>
      </template>
      <template v-else-if="activeName === 'number distribution'">
        <NumberDistribution
          :groups="groupMap[groupsKey]"
          :row-size="6"
        />
      </template>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import DateLineViewMixin from '@/mixins/DateLineViewMixin.js'

import { fifthAddechart, bgColor } from '@/utils/study.js'

export default {
  mixins: [DateLineViewMixin],
  data() {
    return {
      fifthAddechart,
      yAxisSplitLine: {
        show: true,
        lineStyle: {
          color: [
            bgColor, // 根据 -0.1 是否移除
            ...[
              ...fifthAddechart.toReversed(),
              ...fifthAddechart.toReversed()
            ].flatMap((color) => [
              color,
              ...Array(9).fill(bgColor) // 每个颜色后面跟随9个白色
            ])
          ],
          // type: 'solid'
          type: 'dashed'
        }
      }
    }
  },
  computed: {
    ...mapState('study', ['globalGroupMapBySize']),
    groupMap() {
      return this.globalGroupMapBySize['two']
    },
    isRandomGroups() {
      return this.$route.meta.groupsKey.includes('RANGE_00')
    },
    yMax() {
      return this.isRandomGroups ? 23.1 : 24.1
    }
  },
  created() {
    this.groupsKey = this.$route.meta.groupsKey
  }
}
</script>
